地震 · 纯代码图文特效(2)
除了干货，其它什么也没有 | ||||
职场 | 数据 | 新媒体 | 设计 | 极客 |
答疑/咨询：021 37218818
纯代码地震图示动画 ©️JZ Creative Studio, 2017
文字地震抖动效果 ©️JZ Creative Studio, 2017
导语：近期，各大企业级微信公众平台频繁推出代码特效型图文。其中一部分基于常规 CSS 样式，另有一部分则遵循我们 JZ 多媒体解决方案在去年和腾讯联合制定的 SVG AttributeName 规范，推出了不少优质作品，整个微信行业正在朝着专业代码级运营发展。特此，作为微信图文内动画标准的制定方，本厂牌即日起发布一系列基础的代码样式免费教程，欢迎学习研读。
第一期 渐变 · 纯代码图文特效(1)
本文已纳入 JZ 多媒体解决方案新发售图书版权，禁止任何形式转载或洗稿，禁止任何第三方编辑器在非授权情况下转存为样式模版。
当个人运营者还在通过百度无意识盗图的时候，企业往往拥有庞大的付费图库资源，同时基于图库素材的数据可视化信息图越来越流行。如何在微信公众平台中，投放一套高度专业化的信息图？一种选择是贴图，另一种选择是更具有科技感的代码级微信动画。
微信信息图设计方法
目前所流行的扁平设计信息图，往往是出于将严肃话题生动化的考量。但当企业、政府严肃介绍某一款产品、某一桩事件时，可爱而活泼的常规信息图不再合适。这时候，微信代码级信息图可以极大提升专业度感官，例如往期我们也发布过台湾导弹炸渔船事件的代码信息图《微信动画｜台湾吓哭：昨天差点回归了！》。
本文中的地震图示动画，主要牵涉的是<opacity>和<r>这两个 AttributeName 动画，制作其实非常便捷。
1）绘制地图与震中位置。这一步主要在 Adobe Illustrator 中完成。当那要注意的是，微信图文内的 SVG 画布会 100％ 大小显示，所以在 Ai 画板中制作时也需要将视角设置为 100%，画板的裁切大小控制在手机屏宽度内，并且要有一定留白▼
2）接下来，另存为 SVG 格式，并且在 Ai 中查看 SVG 的初始代码▼
3）复制到编辑器使用时，仍然要注意不要缩写标签尾，否则 SVG 的路径会仅剩第一段。待实现了静态部分内容包括文字标注后，我们可以着手开始制作地震波效果。事实上，地震波分别通过一个实心圆和一个描边圆放大+淡出实现，并且描边圆的放大半径比被它套住的实心圆半径更大。以下是实心圆的静态构建▼
<circle fill="red" cx="182.1" cy="148" r="2">
</circle>在标签之间加入透明度动画和半径动画▼
<animate attributename="opacity" values="1;0" dur="1.5s" repeatcount="indefinite">
</animate>
<animate attributename="r" values="1;10" dur="1.5s" repeatcount="indefinite">
</animate>描边圆同理可得。
地震式文字设计方法
地震式文字是老代码的新玩法（明天我们也将发布第三期非常有趣的老代码新游戏）。相信很多运营官都接触过弹幕类基础 SVG 动画，但也很容易机械地认为这种动画的原理只能实现文字的固定方向刷屏移动。现在，我们取走传统的<from>和<to>的起止定义，采用的<values>打下多个关键帧，使得是<x>和<y>具备多个定位顺序▼
<animate attributename="x" values="100;101;99;104;98;100" dur=".3s" repeatcount="indefinite">
</animate>
<animate attributename="y" values="130;131;127;129;135;130" dur=".3s" repeatcount="indefinite">
</animate>以上就是第二期的微信顶级代码图文教学。如果你是运营新手，则建议向本公众号回复「排版」开始学习。当然更多专业排版知识你也可以加入我们的网易云课堂深度学习▼
网易云课堂 高级排版术 |
更多 VI、前端、H5、小程序等层面的其他疑问或企业培训预约，可以致电 (021)37218818 询问。
线下讲座安排
- END -
#招聘启事#广告设计师 职务要求：
1.有扎实的平面设计功底
2.有扎实的动效设计功底
3.对广告创意有独立见解
4.对界面交互有基本认知
5.应届毕业或毕业两年内
职务说明：
1.上海办公
2.专职客户数字广告业务
3.参与教务系统
4.参与设计专著图书写作
基本待遇：
1.8000-12000薪资
2.住房（人才公寓）
3.午餐全额补贴
4.五险一金
应聘材料：
1.个人简历（PDF）
2.作品集 材料不限大小，请邮件至
jzcreative@vip.126.com
本则招聘长期有效
其他你会感兴趣的内容
回复 排版阅读互联网文案排版教程
回复 标题了解优质标题的酝酿方法
回复 配图学习图片素材的搭配方法
回复 H 5开启移动营销技术学习课
回复 广告看更多行业广告知识大全
H5、平面、视频等数字营销服务请致电
TEL：（021）3721 8818
客户案例：APEC 峰会 | 中国航天科技集团 | 香奈儿 | 肯德基（湖南） | 中国国际航空 | 湖北省电视台 | 河南卫视 | 浙江省人民广播电台 | 三生制药 | 交通银行 | 建设银行 | 真格基金 | 南方周末 | 上海闵行教育学院 | 牛津大学出版社 | 新东方集团 | 伟巴斯特 | 雪佛兰汽车 | 观致汽车 | 雷诺汽车 | TNS 新华信 | 高力国际｜第一太平戴维斯｜德国莱茵｜盖茨基金会｜追星集团
抱歉，除了干货，其他什么也没有。